<template>
  <div class="content">
    <div
      ref="charts"
      style="width: 500px; height: 400px;"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getEchartsRadar } from '@/api/mockEcharts'
export default {
  name: 'EchartsRadar',
  data() {
    return {
      list1: [],
      list2: []
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    async initCharts() {
      const res = await getEchartsRadar()
      this.list1 = res.data.list1.map(item => {
        return item.num
      })
      this.list2 = res.data.list2.map(item => {
        return item.num
      })
      console.log(this.list1, this.list2)
      const charts = echarts.init(this.$refs['charts'])
      const option = {
        title: {
          text: '文章分类',
          left: 'center'
        },
        // legend: {
        //   data: ['Allocated Budget', 'Actual Spending']
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 },
            { name: 'submit', max: 18000 },
            { name: 'masker', max: 19000 },
            { name: 'desting', max: 32000 },
            { name: 'helloketty', max: 13000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: this.list1,
                name: 'Allocated Budget'
              },
              {
                value: this.list2,
                name: 'Actual Spending'
              }
            ]
          }
        ]
      }
      charts.setOption(option)
    }
  }
}
</script>

  <style>

  </style>

